{% extends 'layout/layout.html' %}
{% block body %}
    <div style="margin:auto;">
        <div style="margin: 5px">
            <a class="btn btn-info" href="/add_stu/">添加</a>
            <a class="btn btn-info" data-toggle="modal" data-target="#addModal">对话框添加</a>
        </div>
        <table class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
                <th>所属班级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for row in stu_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.mail }}</td>
                    <td>{{ row.age }}</td>
                    <td clsid="{{ row.class_id }}">{{ row.cls.title }}</td>
                    <td>
                        <a class="glyphicon glyphicon-remove" href="/del_stu/{{ row.id }}">删除</a>
                        |
                        <a class="glyphicon glyphicon-pencil" href="/edit_stu/{{ row.id }}">编辑</a>

                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        <!-- Modal -->
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                    </div>
                    <div class="modal-body">
                        <form id="addForm">
                            {% csrf_token %}
                            {% for feild in form %}
                                <div class="form-group">
                                    <label for="{{ feild.id_for_label }}">{{ feild.label }}</label>
                                    <div class="row">
                                        <div class="col-xs-7">
                                            {{ feild }}
                                            <span class="error-msg">{{ feild.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                        <button id="btnAdd" type="button" class="btn btn-primary">添 加</button>
                    </div>
                </div>
            </div>
        </div>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                {{ page_info.pager|safe }}
            </ul>
        </nav>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            bindAdd();
        });

        function bindAdd() {
            $('#btnAdd').click(function () {
                $.ajax({
                    url: '{% url 'students' %}',
                    type: 'POST',
                    data: $('#addForm').serialize(),
                    datatype: JSON,
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            location.reload()
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }

                })
            })
        }
    </script>
{% endblock %}